<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的渐隐渐现动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>

    <div></div>

    <script src="./jquery.js"></script>
    <script>
        /*
        基本动画
          1.fadeIn()显示
          2.fadeOut()隐藏
          3.fadeToggle()切换
            =>本身如果是显示的，就隐藏
            =>本身如果是隐藏的，就显示
           +对于以上三个运动函数，在共同的参数
            =>第一个表示运动时间
            =>第二个表示运动曲线
            =>第三个表示运动结束的回调函数
           4.fadeTo(运动时间，指定透明度，运动曲线，运动结束的回调函数)
        */

        $('button:nth-child(1)').click(function(){
            //执行fadeIn动画函数  
            $('div').fadeIn(1000,'linear',function(){console.log('fadeIn结束')})
        })
        $('button:nth-child(2)').click(function(){
            //执行fadeOute动画函数  
            $('div').fadeOut(1000,'linear',function(){console.log('fadeOut结束')})
        })
        $('button:nth-child(3)').click(function(){
            //执行fadeToggle动画函数  
            $('div').fadeToggle(1000,'linear',function(){console.log('fadeToggle结束')})
        })
        $('button:nth-child(4)').click(function(){
            //执行fadeTo动画函数  
            $('div').fadeTo(1000,0.68,'linear',function(){console.log('运动到了指定的透明度结束')})
        })
    </script>
</body>
</html>